<template>
	<view class="s-item" :class="{more:more,border:border}">
		<view class="left">
			<text class="txt">{{title}}</text>
		</view>
		<view class="desc" :class="{remark:remark}">{{desc}}</view>
		<view class="right" :class="{remark:remark}">
			<text class="txt" >
				{{more}}
			</text>
			<text v-if="arrow" class="iconfont iconarrow_right"></text>
		</text>
	</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:String,
			desc:String,
			remark:Boolean,
			more:String,
			border:Boolean,
			arrow:Boolean
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="stylus">
	.s-item
		background-color white
		height 72upx
		display flex
		align-items center
		justify-content space-between
		padding 0 20upx
		background-color #FFFFFF
		&.border
			border-bottom 1px solid #DCDCDC
		&.more
			background-color #FFF0F0
		.left
			min-width 207upx
			height 100%
			display flex
			align-items center
			.txt
				color #6F6F6F
				font-size 24upx
		.desc
			flex 1
			color #6F6F6F
			font-size 24upx
			&.remark
				font-size 22upx
				color #FC8787
		.right
			color #FF9B9B
			font-size 20upx
			display flex
			justify-content space-between
			align-items center
			height 100%
			&.remark
				color #FC8787
			.iconarrow_right
				margin-top 2upx
				font-size 20upx
			.txt
				margin-right 5upx
				
</style>
